<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <!-- url 
    domain 组织文件 向用户提供很多资源
    链接把资源组织起来
    一切皆资源 Restful -->

    <div class="wrapper">
        <ul class="nav">
            <li><a href="index.html" target="_blank">Home</a></li>
            <li><a href="fluffy.html">Fluffy.html</a></li>
            <li><a href="socks.html">scocks.html</a></li>
            <li><a href="whiskers.html">whiskers</a></li>
        </ul>
        <p class="content">Welcome to Kittens! Home of Fluffy, Socks,
             and Whiskers. If you're not suffering from a cute overdose within the hour, 
             then you really are a heartless bugger! Now lets look at some cats!
    
        </p>
        <div class="media"><img src="http://www.ichong123.com/uploads/2014/08/m1.jpg" class="photo"></div>
    </div>
    <script>
        // 传统的web网站 发起优化
        // ajax 刷新整个页面  不用白一下
        // 生命周期 所有资源加载完
        function getHtml(href,callback) {
            // fetch 小弟
            const xhr = new XMLHttpRequest();
            xhr.open("GET",href)// web 2.0 url
            xhr.send();
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState,'------');
                if(xhr.readyState == 4) {
                    callback(xhr.responseText)
                }
            }
        }
        function createState(data) {
            //. 可以匹配任何字符
            // + 匹配一次或者多次
            //() 分组
            const contentMatches = data.match(/content">(.+)</);
        // console.log(contentMatches);
        const content = contentMatches[1];
        const photoMatches = data.match(/img.+src="(.+)"\s/);
        const photo = photoMatches[1];
        console.log(photo);
        return {
            content,
            photo
        }
        }
        window.addEventListener('DOMContentLoaded',function() {
            // html+css 页面渲染
            // 比load 更早的js 运行 交互
            const links = document.querySelectorAll('.nav li a');
            links.forEach(link=>{
                link.addEventListener('click',function(event) {
                 // 传统a 点完就白屏
                 // 通用
                 event.preventDefault();
                    //let href = this.href;
                    let href = event.target.href;
                 getHtml(href,function(data) {
                  // callback
                  //console.log(data)
                  let state = createState(data);
                  document.querySelector('.content').innerHTML = state.content;
                  document.querySelector('.photo').src = state.photo;
                  
                 })
                    
                   // const xhr = new XMLHttpRequest();

                   // console.log(href);
                })
            })
            //console.log('loaded');
        }) 
    //    window.addEventListener('load',function(){
    //        console.log('onload')
    //    })
        
    </script>
    
</body>
</html>